<template>
  <MyDialog :submit="onButton" title="fitment">
    <q-card-section class="q-ma-md">
      <div class="text-body q-ma-md row">
        <div class="col-4 fal">Defitment:</div>
        <div class="col-8">{{ props.sn }}</div>
      </div>

      <div class="text-body q-ma-md row">
        <div class="col-4 fal">{{ props.actions }}</div>
        <div class="col-6">
          <!-- <q-input filled v-model="text" :dense="true"> </q-input> -->
<!--          <ScanInput-->
<!--            ref="scanInputDom"-->
<!--            v-model="text"-->
<!--            @enter="onScanInputEnter"-->
<!--            initFocus-->
<!--            :placeholder="'Scan or choose Serial number'"-->
<!--          >-->
<!--          </ScanInput>-->
          <q-select
              class="input-css"
              style="width: 100%;padding: 0 !important;"
              :dense="true"
              borderless
              :options="serialNoOptions"
              rounded
              outlined
              :model-value="text"
              use-input
              hide-selected
              fill-input
              @filter="filterFn"
              @input-value="onScanInputEnter"
              :placeholder="'Scan or choose Serial number'"
          ></q-select>
        </div>
        <div class="col-2">
          <q-icon
            color="primary"
            class="cursor-pointer"
            name="qr_code"
            size="lg"
            @click="scanDiag = true"
          ></q-icon>
          <q-dialog  v-model="scanDiag">
            <OpenCam @submit="(v:string)=>onSubmitCam(v)"></OpenCam>
          </q-dialog>
        </div>
      </div>
    </q-card-section>
  </MyDialog>
</template>
<script setup lang="ts">
import {onMounted, ref} from 'vue';
import ScanInput from '../ScanInput.vue';
import OpenCam from 'src/components/OpenCam.vue';
import MyDialog from '../container/MyDialog.vue';
import {fetchPartWithNumOfChildFillter} from 'src/services/partsService';

const text = ref('');
const scanDiag = ref(false);
const props = defineProps<{
  sn?: string;
  description?: string;
  actions: 'Fitment' | 'Defitment';
}>();

const emit = defineEmits(['update']);

const onScanInputEnter = (string: string) => {
  text.value = string;
  // emit('update', string);
};

const serialNoOptions = ref<string[]>([]);
const serialNoList = ref<string[]>([]);


function onSubmitCam(string: string) {
  scanDiag.value = false;
  text.value = string;
  emit('update', string);
}

/* function output(string: string) {
  const obj = JSON.parse(string);
  text.value = string;
  return {
    stock_code: obj.CAT,
    serial_no: obj.SN,
  };
} */

function onButton() {
  emit('update', text.value);
}

function filterFn (val, update, abort) {
  update(() => {
    const needle = val.toLocaleLowerCase()
    serialNoOptions.value = serialNoList.value.filter(v => v.toLocaleLowerCase().indexOf(needle) > -1)
  })
}

async function loadFetchPartWithNumOfChildFillter() {
  const res = await fetchPartWithNumOfChildFillter('','', props.description.split(' ')[1]);
  serialNoList.value = res.data.map((v) => v.serial_no);
}

onMounted(() => {
  loadFetchPartWithNumOfChildFillter();
})
</script>
